<template>
  <div
    class="bg-gray-800/40 rounded-lg border border-gray-700 p-3 hover:border-gray-500 transition-all"
  >
    <div class="flex justify-between items-center">
      <div>
        <div class="font-medium">{{ name }}</div>
        <div class="text-xs text-gray-400 mt-1">运行时间: {{ uptime }}</div>
      </div>
      <div class="flex items-center gap-2">
        <div :class="statusDotClass" class="w-3 h-3 rounded-full"></div>
        <span :class="statusTextClass" class="text-sm capitalize">{{ statusText }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue'

  const props = {
    name: {
      type: String,
      required: true
    },
    status: {
      type: String,
      default: 'normal',
      validator: (value) => {
        return ['normal', 'warning', 'error', 'offline'].includes(value)
      }
    },
    uptime: {
      type: String,
      required: true
    }
  }

  // 计算状态相关的类
  const statusDotClass = computed(() => {
    const classes = {
      normal: 'bg-green-500',
      warning: 'bg-yellow-500',
      error: 'bg-red-500',
      offline: 'bg-gray-500'
    }
    return classes[props.status]
  })

  const statusTextClass = computed(() => {
    const classes = {
      normal: 'text-green-400',
      warning: 'text-yellow-400',
      error: 'text-red-400',
      offline: 'text-gray-400'
    }
    return classes[props.status]
  })

  const statusText = computed(() => {
    const texts = {
      normal: '正常',
      warning: '警告',
      error: '错误',
      offline: '离线'
    }
    return texts[props.status]
  })
</script>
